<template>
    <div class="comment">
        <div class="comment-info">
            <div class="total-score-box">
                <div>
                    <div class="total-score">
                        {{ comment.storeScore }}
                    </div>
                    <span>商家评分</span>
                </div>

                <div>
                    <div>
                        <span>口味</span>
                        <van-rate v-model="comment.tasteScore" size="10" allow-half void-icon="star" color="#ffd21e" void-color="#eee" />
                        <span style="margin-left:10px;color:orange;">{{comment.tasteScore}}</span>
                    </div>

                    <div style="margin-top:5px;">
                        <span>包装</span>
                        <van-rate v-model="comment.packScore" size="10" allow-half void-icon="star" color="#ffd21e" void-color="#eee" />
                        <span style="margin-left:10px;color:orange;">{{comment.tasteScore}}</span>
                    </div>
                </div>

                <div>
                    <div class="delivery-score">
                        {{ comment.deliveryScore }}
                    </div>
                    <span>配送评分</span>
                </div>
            </div>
        </div>
        <div class="comment-list">
            <div class="comment-item" v-for="item in comment.commentList" :key="item.id">
                <div class="left">
                    <img :src="item.avatar" />
                </div>

                <div class="right">
                    <div class="nickname-box">
                        <span>{{item.nickname}}</span>
                        <span>{{item.commentTime}}</span>
                    </div>
                    <div class="user-score">
                        <van-rate v-model="item.score" size="10" allow-half void-icon="star" color="#ffd21e" void-color="#eee" />
                    </div>
                    <div class="content">
                        {{item.content}}
                    </div>
                    <div class="replay">
                        <span>
                            商家回复:{{item.replay}}
                        </span>
                    </div>
                </div>
            </div>
        </div>
    </div>
</template>

<script>
import comment from '@/api/comment'

export default {
    data() {
        return {
            comment: null,
        }
    },
    created() {
        this.getCommentByStoreId()
    },
    methods: {
        getCommentByStoreId() {
            let id = this.$route.params.id

            comment.getCommentByStoreId(id)
                .then(res => {
                    if (res.code == 200) {
                        
                        this.comment = res.comment
                    }
                })
        }
    }
}
</script>

<style scoped>
.comment-info{
    margin-top:20px;

    background-color:white;

    padding:10px;
}

.total-score-box{
    display:flex;
    justify-content: space-around;
}

.total-score-box > div{
    text-align: center;;
}

.total-score{
    color:orange;
}

.delivery-score{
    color:gray;
}

.total-score,
.delivery-score{
    font-size:24px;
}

.comment-item{
    display:flex;

    background-color:white;

    margin-top:5px;
    padding:20px;
}

.comment-item .nickname-box{
    display:flex;
    justify-content: space-between;
}

.comment-item .left{
    margin-right: 10px;;
}
.comment-item .left img{
    border-radius: 50%;
}

.comment-item .replay{
    margin-top:10px;
    background-color:rgb(239, 234, 234);
    padding:5px;
}
</style>